import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal } from 'antd';

import { FormComponentProps } from '@ant-design/compatible/es/form';
import React from 'react';

interface CreateFormProps extends FormComponentProps {
  previewModelVisible: boolean;
  previewImg: string;
  onVisibleModel: (showModel: boolean) => void;
}

const PreviewForm: React.FC<CreateFormProps> = props => {
  const { previewModelVisible, previewImg, onVisibleModel} = props;

  return (
    <Modal
      width={640}
      bodyStyle={{ padding: '32px 40px 48px' }}
      destroyOnClose
      title="图片预览"
      visible={previewModelVisible}
      onOk={() => onVisibleModel(false)}
      onCancel={() => onVisibleModel(false)}
      afterClose={() => onVisibleModel(false)}
      footer={null}
    >
      <img src={previewImg} width="100%"/>
    </Modal>
  );
};

export default Form.create<CreateFormProps>()(PreviewForm);
